.me-subheading {
    display: flex;

    .right {
        flex: 2;
        display: flex;
        justify-content: flex-end;
        align-self: center;
    }
}

.new-token-button {
    composes: yellow-button from '../../styles/shared/buttons.module.css';
}

.explainer {
    line-height: 1.5;
}

.token-list {
    margin: var(--space-m) 0;
    padding: 0;
    list-style: none;
    border-radius: var(--space-3xs);
    background-color: light-dark(white, #141413);
    box-shadow: 0 1px 3px light-dark(hsla(51, 90%, 42%, .35), #232321);

    > * {
        padding: var(--space-m);
    }

    > * + * {
        border-top: 1px solid light-dark(hsla(51, 90%, 42%, .25), #424242);
    }
}

.name {
    margin: 0 0 var(--space-s);
    font-weight: 500;
}

.scopes,
.metadata {
    composes: small from '../../styles/shared/typography.module.css';

    > * + * {
        margin-top: var(--space-3xs);
    }
}

.scopes {
    margin-bottom: var(--space-xs);
}

.new-token-form {
    padding: var(--space-m);
    border-radius: var(--space-3xs);
    background-color: white;
    box-shadow: 0 2px 3px hsla(51, 50%, 44%, .35);
    margin-top: var(--space-m);

    .input {
        padding: var(--space-2xs);
        width: 100%;
        border: 1px solid #ada796;
        border-radius: var(--space-3xs);
    }
}

.actions {
    margin-top: var(--space-s);
    display: flex;
    align-items: center;
}

.spinner {
    margin-left: var(--space-xs);
}

.save-button {
    composes: yellow-button small from '../../styles/shared/buttons.module.css';
    flex-grow: 1;
    border-radius: var(--space-3xs);
}

.revoke-button {
    composes: tan-button small from '../../styles/shared/buttons.module.css';
    flex-grow: 1;
    border-radius: var(--space-3xs);
}

.regenerate-button {
    composes: yellow-button small from '../../styles/shared/buttons.module.css';
    flex-grow: 1;
    border-radius: var(--space-3xs);
}

.new-token {
    margin-top: var(--space-s);
}

.new-token-explainer {
    font-size: 20px;
}

.token-display {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    background: var(--main-color);
    color: light-dark(white, #141413);
    font-family: var(--font-monospace);
    border-radius: var(--space-3xs);
    margin-top: var(--space-xs);
}

.token-value {
    padding: var(--space-s);
    user-select: all;
}

.copy-button {
    composes: button-reset from '../../styles/shared/buttons.module.css';
    align-self: stretch;
    padding: 0 var(--space-s);
    cursor: pointer;

    &:hover {
        color: light-dark(#ddd8b2, #65655e);
    }
}

.copy-button-label {
    composes: sr-only from '../../styles/shared/a11y.module.css';
}

.copy-button-icon {
    width: auto;
    height: 1.3em;
}

.empty-state {
    display: grid;
    place-items: center;
    align-content: center;
    margin: var(--space-m) 0;
    padding: var(--space-xl-2xl);
    border: 2px light-dark(black, white) dashed;
    border-radius: var(--space-3xs);
    background-color: light-dark(white, #141413);
    box-shadow: 0 2px 3px light-dark(hsla(51, 50%, 45%, .35), #232321);
}

.empty-state-label {
    font-size: 20px;
}

.empty-state-button {
    composes: yellow-button small from '../../styles/shared/buttons.module.css';
    margin-top: var(--space-m);
    border-radius: 4px;
}

.expired {
    opacity: 0.6;
}

@media (min-width: 640px) {
    .new-token-form {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: stretch;
        padding: var(--space-s) var(--space-m);

        .actions {
            margin: 0 0 0 var(--space-xs);
        }
    }


    .row {
        display: grid;
        grid-template:
            "name actions" auto
            "scopes actions" auto
            "metadata actions" auto
            "details details" auto
            / 1fr auto;

        .scopes {
            grid-area: scopes;
        }

        .metadata {
            grid-area: metadata;
        }

        .actions {
            display: flex;
            flex-direction: column;
            grid-area: actions;
            align-self: start;
            margin: 0 0 0 var(--space-xs);
        }

        .actions > * {
            flex-grow: 1;
            width: 100%;
            margin-top: var(--space-xs);
        }

        .new-token {
            grid-area: details;
            margin-bottom: 0;
        }
    }
}
